import React from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';
import PagePreview from 'modules/page/preview';
import LazilyLoad, { importLazy } from 'components/lazilyLoad';
import ScrollArea from 'components/scrollArea';
import css from './index.less';

let modules = {};
@observer
export default class PreviewSimulator extends React.Component {

  static propTypes = {
    simulatorWidth: PropTypes.number,
  };

  static defaultProps = {
    visible: 750,
  };

  constructor(props) {
    super(props);
    this.state = {

    };
  }

  renderPage() {
    const { simulatorWidth, project } = this.props;
    // const { mod, mod: { list = [] } } = this.props;
    return project.list.map(pages => {
      if (pages.type === 'mainPages') {
        const getShowPage = pageId => pages.list.filter(page => page.id === pageId)[0];
        const props = {
          key: pages.id,
          mod: pages.previewId ? getShowPage(pages.previewId) : pages.list[0],
          scale: simulatorWidth / 750
        };
        return (
          <PagePreview {...props}/>
        );
      }
      return null;
    });
  }

  render() {
    const { simulatorWidth } = this.props;
    const props = {
      className: css.screen,
      style: {
        transformOrigin: '0 0',
        transform: `scale(${simulatorWidth / 750})`,
      }
    };
    return (
      <div style={{
        width: `${simulatorWidth}px`,
        height: `${simulatorWidth / 750 * 1334}px`,
        margin: '0 auto'
      }}>
        <ScrollArea {...props}>
          {this.renderPage()}
        </ScrollArea>
      </div>
    );
  }
}
